*{
  margin:0;
  padding:0;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  border:10px solid palegoldenrod;
  box-sizing: border-box;
}
.iconfont{
  font-size: 42px !important;
}
header div{
  font-size: 42px;
}
header span{
  font-size:42px ;
}
.xz-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:1.2;text-align:center;border-radius:2px;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.xz-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.xz-button:active::before{opacity:.1}.xz-button--disabled::before,.xz-button--loading::before{display:none}.xz-button--default{color:#323233;background-color:#fff;border:1px solid #ebedf0}.xz-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.xz-button--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.xz-button--danger{color:#fff;background-color:#ee0a24;border:1px solid #ee0a24}.xz-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.xz-button--plain{background-color:#fff}.xz-button--plain.xz-button--primary{color:#07c160}.xz-button--plain.xz-button--info{color:#1989fa}.xz-button--plain.xz-button--danger{color:#ee0a24}.xz-button--plain.xz-button--warning{color:#ff976a}.xz-button--large{width:100%;height:50px}.xz-button--normal{padding:0 15px;font-size:14px}.xz-button--small{height:32px;padding:0 8px;font-size:12px}.xz-button__loading{color:inherit;font-size:inherit}.xz-button--mini{height:24px;padding:0 4px;font-size:10px}.xz-button--mini+.xz-button--mini{margin-left:4px}.xz-button--block{display:block;width:100%}.xz-button--disabled{cursor:not-allowed;opacity:.5}.xz-button--loading{cursor:default}.xz-button--round{border-radius:999px}.xz-button--square{border-radius:0}.xz-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.xz-button__content::before{content:' '}.xz-button__icon{font-size:1.2em;line-height:inherit}.xz-button__icon+.xz-button__text,.xz-button__loading+.xz-button__text,.xz-button__text+.xz-button__icon,.xz-button__text+.xz-button__loading{margin-left:4px}.xz-button--hairline{border-width:0}.xz-button--hairline::after{border-color:inherit;border-radius:4px}.xz-button--hairline.xz-button--round::after{border-radius:999px}.xz-button--hairline.xz-button--square::after{border-radius:0}

/* .xzloading{
  width: 80px;
  height: 40px;
  margin: 0 auto;
  margin-top:100px;
}
.xzloading span{
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
  0%,100%{
      height: 40px;
      background: lightgreen;
  }
  50%{
      height: 70px;
      margin: -15px 0;
      background: lightblue;
  }
}
.xzloading span:nth-child(2){
  -webkit-animation-delay:0.2s;
}
.xzloading span:nth-child(3){
  -webkit-animation-delay:0.4s;
}
.xzloading span:nth-child(4){
  -webkit-animation-delay:0.6s;
}
.xzloading span:nth-child(5){
  -webkit-animation-delay:0.8s;
} */
.xzloading{
  width: 150px;
  height: 8px;
  border-radius: 4px;
  margin: 0 auto;
  margin-top:100px;
  position: relative;
  background: lightblue;
  overflow: hidden;
}
.xzloading span{
  display:block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: lightgreen;
  -webkit-animation: changePosition 4s linear infinite;
}
@-webkit-keyframes changePosition{
  0%{
      -webkit-transform: translate(-150px);
  }
  50%{
      -webkit-transform: translate(0);
  }
  100%{
      -webkit-transform: translate(150px);
  }
}

.xzloading2{
  position:fixed;
  left:0;
  top:0;
  background-color: #000;
  opacity: .5;
  color:#fff;
  font-size: 28px;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* dialog */
.xz-dialog {
  width: 100%;
  height: 100%;
  /* background-color: #000;
  opacity: .3; */
  background-color: rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
}

.xz-dialog .box {
  width: 500px;
  height: 300px;
  background-color: #fff;
}

.xz-dialog .box .header { 
  height: 50px;
  background-color: green;
  border-bottom: solid 2px black;
}
.xz-dialog .box .main { 
   height: 200px;
}
.xz-dialog .box .footer { 
   height: 50px;
   border-top: solid 2px black;
  text-align: right;
}

/* page */

.xz-page span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #000;
  color: #fff;
  font-weight: bold;
}

.xz-page span:hover { color:yellow; cursor: pointer; }


/* table */
table{
 border:1px solid black;
 border-collapse:collapse;
 border-spacing:0;
 padding:10px;
}
th,td{
  border:1px solid black;
  border-collapse:collapse;
  border-spacing:0;
  padding:15px;
}
